
<template>
  <div>
    <el-button type="text" @click="addClass(form)">添加</el-button>
    <el-table
      :data="
        tableNowData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >



      <el-table-column label="班级编号" prop="classId"> </el-table-column>
      <el-table-column label="班级" prop="className"></el-table-column>
    

      <el-table-column align="left">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button type="text" @click="editStu(scope.row)">修改</el-button>
          <!-- 修改 -->
          <el-dialog
            :title="titleMap[dialogTitle]"
            :visible.sync="dialogFormVisible"
          >
            <el-form :model="form" :rules="rules">
                <el-form-item label="班级名" :label-width="formLabelWidth">
                <el-input v-model="form.className" autocomplete="off"></el-input>
                     </el-form-item>
                </el-form>      
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitClass()">确 定</el-button>
            </div>
          </el-dialog>
          <!-- 修改结束 -->
          <el-button size="mini" type="danger" @click="open(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :page-size="5"
      background
      layout="prev, pager, next"
      :total="tableData.length"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as api from "../utils/api";
import LoginVue from "./Login.vue";


export default {
  name: "zhlClass",
  data() {
    return {
      tableData: [],
      search: "",
      NowData: {},
      nowPage: 1,
      radio: "1",
      dialogFormVisible: false,
      form: {},
     
      formLabelWidth: "120px",
      titleMap: {
        addData: "添加班级信息",
        updataData: "修改班级信息",
      },
      dialogTitle: "",
        rules: {
                    className: [{
                        required: true,
                        message: '请输入班级名',
                        trigger: 'blur'
                    }],
                   
                },
    };
  },
  components: {},
  computed: {
    tableNowData() {
      let start = (this.nowPage - 1) * 5;
      let stop = start +5;
      this.NowData = this.tableData.slice(start, stop);
      return this.NowData;
    },
  },
  methods: {
    open(item) {
      this.$confirm("此操作将永久删除该班级, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(item);
        this.axios({
          url: api.POST_DELCLASSDATA,
          method: "post",
          data: {
            classId: item.classId,
          },
        })
        .then((data) => {
            console.log('删除');
            console.log(data);
            if (data.data.state.code===200) {
              this.tableData = data.data.data;
               console.log(this.tableData );
              this.$message({
                type: "success",
                message: `删除成功`,
              });
            }
          })
          .catch((data)=>{
              console.log(data);
          })
          
      
      })
      .catch((data)=>{})
     
},

    currentChange(val) {
      this.nowPage = val;
    },
    editStu(item) {
      this.dialogFormVisible = true;
      this.form = item;
      this.dialogTitle = this.titleMap.updataData;
  
    },

    addClass(item) {
      this.dialogFormVisible = true;
      this.dialogTitle = this.titleMap.addData;
      //请求班级列表

    },
    //修改保存
    submitClass() {
      console.log("点击了");
      console.log(this.form);
      if (this.dialogTitle === this.titleMap.addData) {
        //添加
      
        this.axios({
          url: api.POST_ADDCLASSDATA ,
          method: "post",
          data: { data: this.form },
        }).then((data) => {
                  console.log('添加');
                  console.log(data);
         if(data.data.state.code===200){
            
            this.tableData = data.data.data;
              this.$message({
                type: "success",
                message: `添加班级成功`,
              });
                this.dialogFormVisible = false;
         }
         
        });
      } else {
        //修改
    
        this.axios({
          url: api.POST_UPCLASSDATA,
          method: "post",
          data: { data: this.form },
        }).then((data) => {
                  console.log(data);
         if(data.data.state.code===200){
            this.tableData = data.data.data;
              this.$message({
                type: "success",
                message: `修改成功`,
              });
                this.dialogFormVisible = false;
         }
         
        });
      }
    },
  },
  created() {
    this.axios({
      url: api.GET_CLASSDATA ,
      method: "get",
      params: { stuId: 1 },
    }).then((data) => {
      console.log(data);
      this.tableData = data.data.data;
    });
  },
};
</script>

<style lang="less">
</style>